<template>
  <el-dialog title="师傅服务类目和报价" :visible.sync="visible" width="600px" @close="close">
    <el-form :model="form" ref="form" label-width="0">
      <el-form-item v-for="(domain, index) in form.domains" :key="domain.categoryId">
        <el-col :span="4">
          <el-form-item :prop="'domains.' + index + '.check'">
            <el-checkbox v-model="domain.check" @change="onCheckChange(index)"
              >接单</el-checkbox
            >
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item
            :prop="'domains.' + index + '.price'"
          
          >
            {{domain.serviceCategoryFullName}}:
            <el-input v-model="domain.price" style="width: 120px"> </el-input>
            元/平方米
          </el-form-item>
        </el-col>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">返 回</el-button>
      <el-button type="primary" @click="handleSubmit">保 存</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      form: {
        domains: [
        ],
      },
    
    };
  },
  mounted() {},
  methods: {
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const { domains } = this.form;
          this.$emit('update',domains)
        } else {
          console.log("error submit!!", valid);
          return false;
        }
      });
    },
    onCheckChange(index) {
      this.$refs.form.clearValidate(["domains." + index + ".price"]);
    },
    validate(index, value, callback) {
      const item = this.form.domains[index];
      if (item.check && !value) {
        callback(new Error("请输入金额"));
      } else {
        callback();
      }
    },
    close(){
      this.$refs.form.resetFields()
      this.form.domains=[] 
      this.visible  = false
    },
    open(domains) {
      domains=JSON.parse(JSON.stringify(domains))
      this.visible = true;
      this.form.domains = domains.map(item=>{
        return {
          price:item.price/100,
          serviceCategoryFullName:item.serviceCategoryFullName,
          categoryId:item.categoryId,
          check:item.workerCategoryState == 'YES'
        }
      })
    },
  },
};
</script>
<style scoped lang="scss">
.classifyOfPrice {
  max-height: 100px;
  overflow: hidden;
  text-align: left;

  .el-link {
    padding-left: 30px;
  }
}
.content {
  max-height: 600px;
  overflow: auto;
}
.dialog-footer {
  display: flex;
  justify-content: center;
}
</style>
